<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", -10);
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.5 -->
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css"
	rel="stylesheet">
<!-- DataTables -->
<link rel="stylesheet"
	href="../../plugins/datatables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../../index.css">
<link rel="stylesheet" href="../../device/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
th, td {
	white-space: nowrap;
}

div.dataTables_wrapper {
	width: 100%;
	margin: 0 auto;
}

.disk_table {
	text-align: left !important;
}
</style>
</head>

<body>
	<div>
		<div class="bg-custom">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>监控视图</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
					<li class="">监控视图</li>
					<li class="active">IDC地面监控</li>
				</ol>
			</section>

			<div>
				<div class="col-md-3 col-lg-3 padding-left-0 padding-right-0">
					<div class="dashboard-panel margin-right-15 ">
						<div class="row device_dash_panel">
							<div class="row titleStyle">
								<div class="col-xs-12 padding-left-0">
									<img src="../../mainpage/img/blue_line.png" />
									<lable>&nbsp;&nbsp;IDC主机基本信息</lable>
									<i class="fa fa-undo pull-right" onclick="loadIdcInfo();"></i>
								</div>
							</div>
						</div>
						<div class="padding-lr-15">

							<h4>Web服务器基础信息</h4>
							<ul>
								<li>系统状态： <lable style="color:#006633"
										id="app_server_status">N/A</lable></li>
								<li>系统启动时间： <lable id="app_server_starttime">N/A</lable></li>
								<li>IP地址： <lable id="app_server_ip">N/A</lable></li>
								<li>MAC地址： <lable id="app_server_mac">N/A</lable></li>
								<li>总内存大小： <lable id="app_server_mem_total">N/A</lable></li>
								<li>闲置内存大小： <lable id="app_server_mem_free">N/A</lable></li>
							</ul>
							<br />
							<h4>数据库服务器基础信息</h4>
							<ul>
								<li>系统状态： <lable style="color:#006633"
										id="db_server_status">N/A</lable></li>
								<li>系统启动时间： <lable id="db_server_starttime">N/A</lable></li>
								<li>IP地址： <lable id="db_server_ip">N/A</lable></li>
								<li>MAC地址： <lable id="db_server_mac">N/A</lable></li>
								<li>总内存大小： <lable id="db_server_mem_total">N/A</lable></li>
								<li>闲置内存大小： <lable id="db_server_mem_free">N/A</lable></li>
							</ul>
							<br /> <br />
						</div>
					</div>
				</div>
				<div class="col-md-9 col-lg-9 padding-left-0 padding-right-0">
					<div class="dashboard-panel margin-right-15 ">
						<div class="row device_dash_panel">
							<div class="row titleStyle">
								<div class="col-xs-12 padding-left-0">
									<img src="../../mainpage/img/blue_line.png" />
									<lable>&nbsp;&nbsp;监控面板</lable>
									&nbsp;&nbsp;<i class="fa fa-undo pull-right"
										onclick="reloadCharts();"></i>
								</div>
							</div>
							<div>
								<div class="col-md-6 col-lg-">
									<div>
										<div class="titleStyle">WEB主机CPU使用率</div>
										<div id="server_cpu" style="height: 200px;"></div>
									</div>

									<div>
										<div class="titleStyle">WEB主机内存使用率</div>
										<div id="server_mem" style="height: 200px;"></div>
									</div>

									<div>
										<div class="titleStyle">WEB主机端口流量</div>
										<div id="server_flow" style="height: 200px;">服务器内存</div>
									</div>


									<div>
										<div class="titleStyle">
											<span>Web主机硬盘信息<span>
										</div>
										<div class="row padding-lr-15">
											<table id="app_server_disk"
												class="table table-condensed  dashboard-panel-table disk_table">
												<thead>
													<tr>
														<th style="width: 20%">路径</th>
														<th style="width: 30%">使用比例</th>
														<th style="width: 50%">可用量</th>
													</tr>

												</thead>
											</table>
										</div>
									</div>
								</div>
								<div class="col-md-6 col-lg-6">
									<div>
										<div class="titleStyle">数据库主机CPU使用率</div>
										<div id="db_cpu" style="height: 200px;"></div>
									</div>
									<div>
										<div class="titleStyle">数据库主机内存使用率</div>
										<div id="db_mem" style="height: 200px;"></div>
									</div>
									<div>
										<div class="titleStyle">数据库主机端口流量</div>
										<div id="db_flow" style="height: 200px;"></div>
									</div>
									<div>
										<div class="titleStyle">
											<span>数据库主机硬盘信息<span>
										</div>
										<div class="row  padding-lr-15">
											<table id="db_server_disk"
												class="table table-condensed  dashboard-panel-table disk_table">
												<thead>
													<tr>
														<th style="width: 20%">路径</th>
														<th style="width: 30%">使用比例</th>
														<th style="width: 50%">可用量</th>
													</tr>

												</thead>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>


			<div>
				<div class="col-md-12 col-lg-12 padding-right-12"></div>
			</div>



		</div>


	</div>




	<!-- ./wrapper -->
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script src="//cdn.bootcss.com/echarts/2.2.7/echarts.js"></script>
	<script src="../../plugins/common/common-util.js"></script>
	<script src="../../plugins/jsutil/MapUtil.js"></script>




	<script src="../../local/js/main.js"></script>

	<!-- page script -->
	<script type="text/javascript">
		var DAY_FLOW = null;
		var MONTHO_FLOW = null;
		var echarts = null;
		$(function() {

			loadIdcInfo();
			require.config({
				paths : {
					echarts : '//cdn.bootcss.com/echarts/2.2.7'
				}
			});
			require([ 'echarts', 'echarts/chart/line', 'echarts/chart/pie',
					'echarts/chart/bar' ], function(ec) {
				echarts = ec;
				var c0 = loadServerCpu('server_cpu');
				var c1 = loadServerMem('server_mem');
				var c2 = loadServerFlow('server_flow');
				var c3 = loadDBCpu('db_cpu');
				var c4 = loadDBMem('db_mem');
				var c5 = loadDBFlow('db_flow');
				$(window).resize(function() {
					c0.resize();
					c1.resize();
					c2.resize();
					c3.resize();
					c4.resize();
					c5.resize();
				});
			});

			loadDiskInfo(100125);//应用
			loadDiskInfo(100126);//数据库
		});
	</script>
</body>
</html>
